<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="../../d3/d3.min.js" charset="utf-8"></script>
	
	<style type="text/css">
	body { 
	  margin: 20px;
	  color: white;
	}
	</style>
</head>
<body>

	<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
	</svg>
	
	
	<script type="text/javascript">
		var v_Datas  = d3.range(10);
		var v_SVG    = d3.select("body").select("svg");
		var v_XScale = d3.scaleLinear().domain([0 ,10]).range([0 ,300]);  // 坐标轴的线性比例尺 
		
		v_SVG.selectAll("g")
		.data([1,2,3,4])
		.enter()
		.append("g")
		.each(function(d ,i) 
		{
			d3.select(this).attr("transform" ,"translate(" + (50 + i * 50) + "," + (50 + i * 50) + ")");
			
			var v_Axis = null;
			if ( d == 1 )
			{
				v_Axis = d3.axisBottom(v_XScale);
			}
			else if ( d == 2 )
			{
				v_Axis = d3.axisTop(v_XScale);
			}
			else if ( d == 3 )
			{
				v_Axis = d3.axisLeft(v_XScale);
			}
			else if ( d == 4 )
			{
				v_Axis = d3.axisRight(v_XScale);
			}
			
			v_Axis(d3.select(this));
			// 也可以用 d3.select(this).call(v_Axis) 来应用到指定的选择集上。
		});
	</script>

</body>
</html>